<template>
  <router-layout>
    <div class="container">
      <!-- 右侧添加主题 -->
      <AddTheme></AddTheme>
      <div class="wapper-box">
        <div class="banner">
          <!-- <div class="swipe-box">
            <van-swipe :autoplay="3000">
              <van-swipe-item v-for="(image, index) in images" :key="index" @click="linkUrl(image)">
                <div class="img-box">
                  <img style="width:100%" :src="image.banner_path">
                </div>
              </van-swipe-item>
            </van-swipe>
          </div>-->
          <div class="search">
            <form action="/">
              <van-search
                class="form-box"
                background
                shape="round"
                v-model="listQuery.article_title"
                placeholder="请输入要搜索的内容"
                @search="onSearch"
                @clear="onCancel"
              />
            </form>
          </div>
        </div>
        <div class="topic">
          <div class="topic_list" v-for="item in topicType" :key="item.id" @click="topicLink(item)">
            <img :src="item.file_path" alt>
          </div>
        </div>
        <div class="van-hairline--top tab-box">
          <div>
            <!-- 暂无数据组件 -->
            <Nodata v-if="isNoData"></Nodata>
            <van-list v-else class="content-list" v-model="loading"
              :finished="finished" @load="onLoad" :offset="0">
              <van-cell v-for="it in activeDataList" :key="it.id" :border="false">
                <div class="content-box" @click="go_detail(it)">
                  <van-row class="container-header" type="flex" justify="space-between">
                    <van-col class="van-ellipsis">
                      <div class="name">
                        <div class="avatar">
                          <img
                            :src="it.portrait?it.portrait:'https://gw.alicdn.com/tfs/TB15Q0lOmzqK1RjSZFHXXb3CpXa-400-400.png'"
                            width="100%"
                            alt
                          >
                        </div>
                        <div class="username">
                          <p class="nams">{{ it.create_username }}</p>
                          <p class="times">{{ it.create_time }}</p>
                        </div>
                      </div>
                      <div class="title_topic" style="line-height:14px;">#{{it.articletype_name}}#</div>
                      <h2 class="content-title one-txt-cut">{{ it.article_title }}</h2>
                      <!-- <p class="content-middle" v-html="it.article_content"></p> -->
                    </van-col>
                    <van-col>
                      <div class="content-img" v-if="it.file_path">
                        <img :src="it.file_path" width="100%" alt>
                      </div>
                    </van-col>
                  </van-row>
                  <div class="content-middle">
                    <van-row type="flex" justify="space-between" align="center">
                      <van-col>
                        <span v-if="!it.top_status==0">
                          <van-tag type="primary">置顶</van-tag>
                        </span>
                      </van-col>
                      <van-col>
                        <i class="title-user">
                          <span class="iconfont icon-dianzan"></span>
                          <span>{{it.like_nums || 0}}</span>
                        </i>
                        <i class="title-user">
                          <span class="iconfont icon-xiaoxi"></span>
                          <span>{{it.comment_nums || 0}}</span>
                        </i>
                      </van-col>
                    </van-row>
                  </div>
                </div>
              </van-cell>
            </van-list>
          </div>
        </div>
      </div>
    </div>
  </router-layout>
</template>

<script>
import BannerItem from "./component/Banner"; //导入banner组件
import Backtop from "../public/backtop/Backtop"; //导入回到顶部
import AddTheme from "../public/mask/AddTheme"; // 导入发表主题
import Nodata from "../public/nodata/Nodata"; // 导入暂无数据组件
import {
  article_list,
  article_addBrowseNum,
  article_listAllArticletype
} from "@/api/article";
import { getBanners } from "@/api/home";
import TitleItem from "../../components/public/title/title";
import { clacTime } from "@/utils";

export default {
  name: "CommunityHome",
  components: { Backtop, AddTheme, Nodata, TitleItem, BannerItem },
  computed: {
    activeDataList: function() {
      return this.dataList.filter(function(item) {
        return item.close_status == 1;
      });
    }
  },
  data() {
    return {
      images: [],
      isNoData: false,
      loading: false,
      finished: false,
      article_content: [],
      topicType: [],
      active: 0,
      dataList: [],
      listQuery: {
        order_by: "",
        current: 1,
        limit: 5,
        company_id: localStorage.getItem("companyId") || 1
      },
      perId: "",
      total: ""
    };
  },
  methods: {
    async Banner() {
      let company_id = localStorage.getItem("companyId");
      let par = {
        company_id: company_id,
        model_id: 2
      };
      let query = Object.assign({}, par);
      let res = await getBanners(query);
      let result = res.data;
      if (result.status == 100) {
        this.images = result.data.rows;
      }
    },
    linkUrl(item) {
      if (item.link_url) {
        window.location.href = item.link_url;
      }
    },
    topicLink(item) {
      this.$router.push({
        path: "/topicType",
        query: {
          id: item.id,
          name: item.articletype_name,
          banner_path: item.file_path,
          nameLink: "articleAdd"
        }
      });
    },
    //切换tab栏
    onClick(index, title) {
      if (index == 0) {
        this.listQuery.order_by = "";
      }
      if (index == 1) {
        this.listQuery.order_by = "read";
      }
      if (index == 2) {
        this.listQuery.order_by = "like";
      }
      this.initList();
    },
    //搜索
    onSearch() {
      this.initList();
    },
    //取消搜索
    onCancel() {
      this.initList();
    },
    //跳转到详情页
    go_detail(it) {
      this.perId = it.id;
      this.$router.push({
        path: "/CommunityDetail",
        query: {
          id: it.id,
          name: "article"
        }
      });
    },

    async topic() {
      //获取话题
      let { data } = await article_listAllArticletype();
      if (data.status == 100) {
        this.topicType = data.data.rows;
      }
    },
    //获取数据
    async initList() {
      let query = Object.assign({}, this.listQuery);
      let res = await article_list(query);
      let result = res.data;
      if (result.status == 100) {
        this.dataList = result.data.rows;
        this.dataList.map(item => {
          let regex = /<[^<>]+>/g;
          item.article_content = item.article_content.replace(regex, "");
          item.create_time = clacTime(item.create_time)
        });
        if (!result.data.results) {
          this.isNoData = true;
        }
      }
      this.loading = false;
      if (result.data.results <= this.dataList.length) {
        this.finished = true;
      }
    },
    onLoad() {
      setTimeout(() => {
        this.listQuery.limit += 2;
        this.initList();
      }, 1000);
    }
  },
  created() {
    this.initList();
    this.topic();
    this.Banner();
  }
};
</script>

<style lang="scss" scoped>
@import "CommunityHome";
</style>

